import {Layout} from '../../src/Layout';
import {InstallCommand} from '../../src/InstallCommand';
import {Command} from '../../src/Command';
import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
import {IllustrationCards} from '../../src/IllustrationCards';
export default Layout;

import docs from 'docs:@react-spectrum/s2';

export const tags = ['svg', 'gradient', 'linear', 'symbol'];
export const description = 'A collection of illustrations that can be imported from @react-spectrum/s2/illustrations.';

# Illustrations

<PageDescription>React Spectrum offers a collection of illustrations that can be imported from `@react-spectrum/s2/illustrations`.</PageDescription>

```tsx render expanded
"use client";
import Cloud from "@react-spectrum/s2/illustrations/gradient/generic1/Cloud";

<Cloud />
```

## Available illustrations

<IllustrationCards />

## Custom illustrations

To use custom illustrations, you first need to convert your SVGs into compatible illustration components. This depends on your bundler.

### Parcel

If you are using Parcel, the `@react-spectrum/parcel-transformer-s2-icon` plugin can be used to convert SVGs to illustration components. First install it into your project as a dev dependency:

<InstallCommand pkg="@react-spectrum/parcel-transformer-s2-icon" flags="--dev" />

Then, add it to your `.parcelrc`:

```tsx
{
  extends: "@parcel/config-default",
  transformers: {
    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
  }
}
```

Now you can import illustration SVGs using the `illustration:` [pipeline](https://parceljs.org/features/plugins/#named-pipelines):

```tsx
import Illustration from 'illustration:./path/to/Illustration.svg';
```

Note that you must use the name `illustration` for the pipeline.

### Other bundlers

The `@react-spectrum/s2-icon-builder` CLI tool can be used to pre-process a folder of SVG illustrations into TSX files.

<Command command="npx @react-spectrum/s2-icon-builder -i 'path/to/illustrations/*.svg' --type illustration -o 'path/to/destination'" />

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.

```tsx
import Illustration from './path/to/destination/Illustration';
```
